import {
  NumberKeyboard, PasscodeInput, Popup, Toast,
} from 'antd-mobile';
// import { useMockOrder } from '@/services/order';
import { useEffect, useRef } from 'react';
import style from './index.module.less';

interface IProps {
  onClose: () => void;
  amount: number;
  visible: boolean;
  productId: string;
  quantity: number;
  onFinish: () => void;
}
/**
 * 微信支付窗
 */
const WxPay = ({
  onClose, visible, amount, onFinish,
}: IProps) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (visible) {
      setTimeout(() => {
        inputRef.current?.focus();
      }, 200);
    }
  }, [visible]);

  const onChangeHandler = (value: string) => {
    if (value.length > 5) {
      Toast.show({
        content: '购买成功',
      });
      // get(
      //   productId,
      //   quantity,
      //   amount,
      // );
      onFinish();
    }
  };

  return (
    <Popup
      visible={visible}
      showCloseButton
      onMaskClick={() => {
        onClose();
      }}
      onClose={() => {
        onClose();
      }}
      bodyStyle={{
        borderTopLeftRadius: '8px',
        borderTopRightRadius: '8px',
      }}
    >
      <div className={style.container}>
        <div className={style.title}>请输入支付密码</div>
        <div className={style.desc}>黑石支付服务平台</div>
        <div className={style.amount}>
          ¥
          {amount}
        </div>
        <PasscodeInput
          ref={inputRef}
          seperated
          onChange={onChangeHandler}
          keyboard={<NumberKeyboard />}
        />
      </div>
    </Popup>
  );
};
export default WxPay;
